<template>
  <div class="certification">
    <!--公司资质认证- -1：已退回 0：待审核 1：直接进入 2：未上传资质 3：弹窗选择一个账号进入 4：新用户弹注册表单 -->
    <el-dialog
      :title="ficationData.authorityStatus==3?'选择公司':'资质认证'"
      :visible.sync="open"
      width="770px"
      :close-on-click-modal="false"
      :before-close="goBackWorkbench"
    >
      <!-- 未上传资质认证 -->
      <div v-if="ficationData.authorityStatus == 2" class="certification-group">
        <p class="txl_title">贵司未完成资质认证，请提交资质，方能申请开通付费会员或免费试用</p>
        <p class="group-tip tl">请完善营业执照及相关信息，工作人员会在1个工作日内审核。<br>
           审楼通过后，会有专员与您对接确认开通付费会员或免费试用</p>
        <div class="group-upload" :class="isHaveInfo ? 'info' : ''">
          <div v-if="picName" class="upload-img">
            <img :src="`https://img1.17img.cn/17img/${picName}`" alt="">
            <i class="el-icon-error" @click="delectImg" />
          </div>
          <div class="upload-box">
            <el-upload
              ref="uploadPic"
              action="/api/b2b/common-api/file/upload/imageNoMark"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <el-button>{{ picName ? '重新上传执照' : '上传执照' }}</el-button>
            </el-upload>
            <p class="box-tip">为保证精准识别，请上传5M以内的高清jpg/jpeg/png格式的营业执照副本</p>
            <p class="box-tip">如需帮助，可拨打电话：4006-315-817</p>
          </div>
        </div>
      </div>
      <!-- 弹窗选择一个账号进入 -->
      <div v-if="ficationData.authorityStatus == 3" class="certification-group">
        <div class="one_zh">
          <p>检测到您的账号绑定了以下公司，请进行选择</p>
          <el-button type="primary" @click="goBackWorkbench">新建公司</el-button>
        </div>
        <div>
           <ul class="company_ul">
            <li class="company_list" v-for="item in ficationData.companyList" :key="item.companyAccount" @click="changeCompany(item)">
              <span>
                <span class="label">公司名称</span>
                <div class="title">{{item.companyName }}  <span v-if="item.authorityStatus==2">· 未完成资质认证</span> </div>
              </span>
              <span>
                <div class="label">仪会通会员级别</div>
                <div class="lf20" >
                  <span v-if="item.userType==14" class="vip_hybg vip_qj">旗舰会员</span>
                  <span v-if="item.userType==15" class="vip_hybg vip_zy">专业会员</span>
                  <span v-if="item.userType==16" class="vip_hybg vip_bz">标准会员</span>
                  <span v-if="item.userType==-1||item.userType==0" class="vip_hybg vip_mf">免费会员</span>
                </div>
              </span>
            </li>
           </ul>
        </div>
      </div>
      <!-- 资质过未通过审核认证 -->
      <div v-if="ficationData.authorityStatus == -1" class="certification-group">
        <p class="group-h1 tl">您的营业执照上传审核未通过，请重新上传，方可正常使用平台。</p>
        <p v-if="ficationData.refuseReason" class="group-tip error">{{ ficationData.refuseReason }}</p>
        <p class="group-tip tl">请完善营业执照及相关信息，工作人员会在1个工作日内市核。<br>
        审核迎过后，会有专员与您对接确认开道付费会员或免费试用</p>
        <div class="group-upload" :class="isHaveInfo ? 'info' : ''">
          <div v-if="picName" class="upload-img">
            <img :src="`https://img1.17img.cn/17img/${picName}`" alt="">
            <i class="el-icon-error" @click="delectImg" />
          </div>
          <div class="upload-box">
            <el-upload
              ref="uploadPic"
              action="/api/b2b/common-api/file/upload/imageNoMark"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <el-button>{{ picName ? '重新上传执照' : '上传执照' }}</el-button>
            </el-upload>
            <p class="box-tip">为保证精准识别，请上传5M以内的高清jpg/jpeg/png格式的营业执照副本</p>
            <p class="box-tip">如需帮助，可拨打电话：4006-315-817</p>
          </div>
        </div>
      </div>
      <!-- 资质审核中 -->
      <div v-if="ficationData.authorityStatus === 0" class="certification-group">
        <p class="group-h1">抱歉您暂无权限！</p>
        <p class="group-tip">您的资质认证申请已提交，请耐心等待工作人员审核，并与您联系</p>
      </div>
      <div v-if="!isHaveInfo" v-loading="loading" class="p16" />
      <div v-if="isHaveInfo" class="upload-info">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="90px" class="info-ruleForm">
          <el-form-item label="企业名称" prop="title">
            <el-input v-model="ruleForm.title" type="text" class="w400" placeholder="请输入企业名称" />
          </el-form-item>
          <el-form-item label="企业类型" prop="newregisteredtype">
            <el-input v-model="ruleForm.newregisteredtype" type="text" class="w400" placeholder="请输入企业类型" />
          </el-form-item>
          <el-form-item label="信用代码" prop="registeredno">
            <el-input v-model="ruleForm.registeredno" type="text" class="w400" placeholder="请输入信用代码" />
          </el-form-item>
          <el-form-item label="法人代表" prop="registeredman">
            <el-input v-model="ruleForm.registeredman" type="text" class="w400" placeholder="请输入法人代表" />
          </el-form-item>
          <el-form-item label="注册地址" prop="regplace">
            <el-input v-model="ruleForm.regplace" class="w400" placeholder="请输入注册地址" />
          </el-form-item>
          <el-form-item label="成立日期" prop="registrationdate">
            <el-date-picker
              v-model="ruleForm.registrationdate"
              class="w400"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="请输入成立日期"
            />
          </el-form-item>
          <el-form-item label="注册资本" prop="regmoney">
            <el-input v-model="ruleForm.regmoney" class="w400" placeholder="请输入注册资本" />
          </el-form-item>
          <div class="flex">
            <el-form-item label="有效期" prop="annualsurveytime">
              <el-date-picker
                v-model="ruleForm.annualsurveytime"
                class="w145"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                @change="getAnnualsurveytime"
              />
              <span style="margin-left: 10px">至</span>
            </el-form-item>
            <el-form-item prop="validdate" class="item-validdate">
              <el-date-picker
                v-model="ruleForm.validdate"
                class="w145"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择截止日期"
                @change="getValiddate"
              />
              <!-- <el-checkbox class="ml16" v-model="longTerm" @change="addLongTerm">长期有效</el-checkbox> -->
              <el-radio v-model="longTerm" class="ml16 radio-title" label="1" @change="addLongTerm">长期有效</el-radio>
            </el-form-item>
          </div>
          <el-form-item label="经营范围" prop="managerange">
            <el-input
              v-model="ruleForm.managerange"
              type="textarea"
              style="width: 400px"
              :rows="5"
              placeholder="请输入经营范围"
            />
          </el-form-item>
          <!-- <el-form-item label="企业性质" prop="registeredtype">
            <div class="content">
              <ul class="checkbox-ul">
                <el-radio-group v-model="ruleForm.registeredtype">
                  <el-radio v-for="item in registeredType" :key="item.value" :label="item.value">{{
                    item.label
                  }}
                  </el-radio>
                  <svg-icon class="item-svg" icon-class="selected" />
                </el-radio-group>
              </ul>
            </div>
          </el-form-item> -->
        </el-form>
        <span  class="dialog-footer upload">
  
  <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
</span>
      </div>

      <div class="kf_body">
          <div class="flex">
            <img class="kf_logo" src="https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/tx.jpg" alt="">
          <div>
            <div class="kf_name">刘亚伟 <span>销售顾问</span></div>
            <div class="kf_news"><i class="el-icon-phone-outline pr8" ></i>
              15718850776
            </div>
            <div class="kf_news"><i class="el-icon-message pr8"></i> liuyw@instrument.com.cn</div>
          </div>
          </div>
       <div class="flex">
        <div class="mr30">
            <img class="kf_ewm" src="https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/1679907270939.jpg" alt="">
            <div class="kf_text">在线客服</div>
          </div>
          <img class="kf_img" src="@/assets/img/beiing_3.png" alt="">
       </div>
     
        </div>

    </el-dialog>
  </div>
</template>
<script>
import api from '@/api'
import Cookie from 'js-cookie'
// import { getImListId } from '@/utils/auth'

export default {
  data() {
    return {
      longTerm: '',
      loading: false,
      picName: '',
      isHaveInfo: false,
      registeredType: [
        { label: '国有', value: 1 },
        { label: '外资', value: 2 },
        { label: '民营', value: 3 },
        { label: '其他', value: 4 }
      ],
      ruleForm: {
        imcom: '', // 展位名称
        imcomAbb: '', // 展位简介
        title: '', // 证书名称
        registeredno: '', // 信用代码
        registeredman: '', // 法人代表
        regplace: '', // 注册地址
        registrationdate: '', // 成立日期
        regmoney: '', // 注册资本
        managerange: '', // 经营范围
        annualsurveytime: '', // 证书开始有效期
        validdate: '', // 证书截止有效期
        filename: '',
        registeredtype: '', // 企业性质
        companyId:Cookie.get('IMID'),
        imlistid:Cookie.get('imListId'),
      },
      rules: {
        imcom: [{ required: true, message: '请填写展位名称', trigger: 'blur' }],
        // imcomAbb: [{ required: true, message: '请填写展位简介', trigger: 'blur' }],
        title: [{ required: true, message: '请填写证书名称', trigger: 'blur' }],
        // newregisteredtype: [{ required: true, message: '请填写企业类型', trigger: 'blur' }],
        registeredno: [{ required: true, message: '请填写信用代码', trigger: 'blur' }],
        registeredman: [{ required: true, message: '请填写法人代表', trigger: 'blur' }],
        regplace: [{ required: true, message: '请填写注册地址', trigger: 'blur' }],
        registrationdate: [{ required: true, message: '请填写成立日期', trigger: 'change' }],
        regmoney: [{ required: true, message: '请填写注册资本', trigger: 'blur' }],
        annualsurveytime: [{ required: true, message: '请填写证书有效期开始时间', trigger: 'change' }],
        validdate: [{ required: true, message: '请填写证书有效期截止时间', trigger: 'change' }],
        managerange: [{ required: true, message: '请填写经营范围', trigger: 'blur' }],
        registeredtype: [{ required: true, message: '请选择企业性质', trigger: 'blur' }]
      },
      infoData: {}
    }
  },
  created() {
   // this.getimlist()
   // this.getKFInfo()
  },
  methods: {
    changeCompany(item){
      let form={
        companyAccount:item.imShowId
      }
      api.login.addLoginCookie(form).then(res=>{
        this.open=false
        this.router.push('/surey')
      })
    },
    async getimlist() {
      const params = {
        imListId:'SH100000'
      }
      const data = await api.imlist.companyInfo(params)
      this.$set(this.ruleForm, 'imcom', data.data.imCom)
    },
    delCookie() {
      var cookies = document.cookie.split(";");
      for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        var eqPos = cookie.indexOf("=");
        var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
        document.cookie =
          name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
      }
      if (cookies.length > 0) {
        for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i];
          var eqPos = cookie.indexOf("=");
          var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
          var domain = location.host.substr(location.host.indexOf("."));
          document.cookie =
            name +
            "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" +
            domain;
        }
      }
    },

   async goBackWorkbench() {
      this.open = false
      await api.home.exit()
      this.router.push('/login?type=sign')
    },

    async getOCRInfo(imgUrl) {
      const params = { imgUrl }
      this.loading = true
      this.isHaveInfo = false
      try {
        const { data, code } = await api.common.getOcr(params)
        this.isHaveInfo = true
        this.loading = false
        if (code === 200) {
          this.$set(this.ruleForm, 'title', data.title)
          this.$set(this.ruleForm, 'newregisteredtype', data.newregisteredtype)
          this.$set(this.ruleForm, 'registeredno', data.registeredno)
          this.$set(this.ruleForm, 'registeredman', data.registeredman)
          this.$set(this.ruleForm, 'regplace', data.regplace)
          this.$set(this.ruleForm, 'registrationdate', data.registrationdate)
          this.$set(this.ruleForm, 'regmoney', data.regmoney)
          this.$set(this.ruleForm, 'managerange', data.managerange)
          this.$set(this.ruleForm, 'annualsurveytime', data.annualsurveytime)
          this.$set(this.ruleForm, 'validdate', data.validdate)
          // 判断证书有效期是否是100年--》长期有效
          const startYaer = this.ruleForm.annualsurveytime.split('-')[0]
          const startMonth = this.ruleForm.annualsurveytime.split('-')[1]
          const startDay = this.ruleForm.annualsurveytime.split('-')[2]
          const newTime = `${parseInt(startYaer) + 100}-${startMonth}-${startDay}`
          if (newTime === this.ruleForm.validdate) {
            this.longTerm = '1'
          } else {
            this.longTerm = ''
          }
        }
      } catch (error) {
        // Object.assign(this.$data.ruleForm, this.$options.data().ruleForm)
        // this.ruleForm = this.$options.data().ruleForm
        // this.ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
        // 以上方法初始化都不好使，待研究
        this.ruleForm.title = '' // 证书名称
        this.ruleForm.registeredno = '' // 信用代码
        this.ruleForm.registeredman = '' // 法人代表
        this.ruleForm.regplace = '' // 注册地址
        this.ruleForm.registrationdate = '' // 成立日期
        this.ruleForm.regmoney = '' // 注册资本
        this.ruleForm.managerange = '' // 经营范围
        this.ruleForm.annualsurveytime = '' // 证书开始有效期
        this.ruleForm.validdate = '' // 证书截止有效期
        this.isHaveInfo = true
        this.loading = false
      }
    },
    handlePicSuccess(res) {
      this.picName = res.data
      this.ruleForm.filename = res.data
      this.getOCRInfo(`https://img1.17img.cn/17img/${this.picName}`)
    },
    beforePicUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 20MB!')
      }
      return isJPG && isLt5M
    },
    delectImg() {
      this.picName = ''
      this.ruleForm.filename = ''
    },
    addLongTerm() {
      if (this.ruleForm.annualsurveytime) {
        const startYaer = this.ruleForm.annualsurveytime.split('-')[0]
        const startMonth = this.ruleForm.annualsurveytime.split('-')[1]
        const startDay = this.ruleForm.annualsurveytime.split('-')[2]
        this.ruleForm.validdate = `${parseInt(startYaer) + 100}-${startMonth}-${startDay}`
        this.longTerm = '1'
      } else {
        this.$message.error('请选择有效期的开始时间')
        this.longTerm = ''
      }
    },
    submitForm(formName) {
      if (this.isHaveInfo && this.picName) {
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            await api.login.addQualification(this.ruleForm)
            this.goBackWorkbench()
            this.$message({
              type: 'success',
              message: '提交成功!'
            })
          } else {
            return false
          }
        })
      } else {
        this.$message({
          type: 'error',
          message: '请上传执照!'
        })
      }
    },
    async getKFInfo() {
      const params = {
        imListId:  'SH100000'
      }
      const { data } = await api.common.findSaleByIMListId(params)
      this.infoData = data
    },
    getValiddate(data) {
      if (this.ruleForm.annualsurveytime && data) {
        const startYaer = this.ruleForm.annualsurveytime.split('-')[0]
        const startMonth = this.ruleForm.annualsurveytime.split('-')[1]
        const startDay = this.ruleForm.annualsurveytime.split('-')[2]
        const newTime = `${parseInt(startYaer) + 100}-${startMonth}-${startDay}`
        if (data === newTime) {
          this.longTerm = '1'
        } else {
          this.longTerm = ''
        }
      } else {
        this.longTerm = ''
      }
    },
    getAnnualsurveytime(data) {
      if (this.ruleForm.validdate && data) {
        const startYaer = data.split('-')[0]
        const startMonth = data.split('-')[1]
        const startDay = data.split('-')[2]
        const newTime = `${parseInt(startYaer) + 100}-${startMonth}-${startDay}`
        if (this.ruleForm.validdate === newTime) {
          this.longTerm = '1'
        } else {
          this.longTerm = ''
        }
      } else {
        this.longTerm = ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixin.scss';

.certification {
  width: 100%;
  position: relative;
  .upload{
    @include flex(row, center, center);
  }       

  ::v-deep .el-dialog {
    .el-dialog__header {
      padding-bottom: 20px;
      border-bottom: 1px solid #E5EAF0;

      .el-dialog__title {
        font-size: 16px;
        font-weight: 500;
        color: #202933;
      }

      // .el-dialog__close:before {
      //   content: '返回登录'
      // }
    }

    .el-dialog__body {
     
     padding: 0;
      .certification-group {
        padding: 25px;
        .company_ul{
          height: 285px;
    overflow-y: auto;
    width: 100%;
    overflow-x: hidden;
          .company_list{
          @include flex(row, center, space-between);
          padding: 16px;
          background: #F5F8FC;
border-radius: 4px 4px 4px 4px;
margin-bottom: 16px;
cursor: pointer;
border: 1px solid #fff;
.label{
font-size: 14px;
color: #7E8790;
line-height: 16px;

}
.lf20{
  margin-top: 14px;
  position: relative;
  left: 20px;
}
.title{
  padding-top: 8px;
font-size: 14px;
color: #202933;
line-height: 16px;
& span{
  color: #FF6332;
}
}
.vip_hybg{
            display: inline-block;
    font-weight: 600;
    color: #FFFFFF;
    font-size: 12px;
    height: 20px;
    line-height: 18px;
    padding-left: 30px;
    padding-right: 10px;
    font-size: 12px;
    transform: scale(0.91,0.91);
    margin-right: 10px;
        }
        .vip_qj{
            background: url('../../assets/img/qijian.png') no-repeat;
            background-size: 100%;
        }
        .vip_mf{
            background: url('../../assets/img/mianfei.png') no-repeat;
            background-size: 100%;
        }
        .vip_bz{
            background: url('../../assets/img/biaozhun.png') no-repeat;
            background-size: 100%;
        }
        .vip_zy{
            background: url('../../assets/img/zhuanye.png') no-repeat;
            background-size: 100%;
        }
        }
        }
       
        .company_list:hover{
          border: 1px solid #0C7FF2;
        }
        .one_zh{
          margin-bottom: 22px;
          @include flex(row, center, space-between);
          p{
font-size: 16px;
color: #202933;
line-height: 26px;

          }
        }
        .group-h1 {
          margin-bottom: 15px;
          line-height: 1;
font-size: 20px;
color: #202933;
line-height: 26px;
margin-top: 15px;
text-align: center;
        }

        .group-tip {
          font-size: 14px;
          color: #7E8790;
          line-height: 1.8;
          text-align: center;
          &.error {
            color: #E53917;
            margin-bottom: 10px;
          }
        }
        .tl{
          text-align: left !important;
        }
        .txl_title{
font-size: 16px;
color: #4F5862;
line-height: 26px;
margin-bottom: 10px;
        }

        .group-upload {
          width: 100%;
          min-height: 100px;
          background: #F5F8FC;
          padding: 15px 25px;
          box-sizing: border-box;
          margin: 20px auto 0;
          position: relative;
          z-index: 999;

          // &.info {
          //   margin-top: 135px;
          // }

          .upload-img {
            width: 100px;
            height: 75px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 33px;
            position: relative;

            img {
              width: 100%;
              max-height: 100%;
            }

            .el-icon-error {
              position: absolute;
              top: -10px;
              right: -10px;
              font-size: 20px;
              z-index: 9;
              cursor: pointer;
            }
          }

          .upload-box {
            display: inline-block;
            vertical-align: middle;

            .box-tip {
              font-size: 12px;
              color: #7E8790;
              margin: 15px auto;
              text-align: left;
            }

            .el-upload-list {
              display: none;
            }
          }
        }
      }

      .upload-info {
        margin: 30px 25px 20px;

        .el-form-item {
          margin-right: 10px;

          &.item-validdate {
            .el-form-item__content {
              margin-left: 0 !important;

              .el-radio {
                &.is-checked {
                  .el-radio__label {
                    color: #0c7ff2;
                  }
                }

                .el-radio__label {
                  color: #7E8790;
                }
              }
            }
          }

          .el-form-item__label {
            text-align: left;
            font-size: 14px;
            padding-block: 0;
            color: #7E8790;

            &::before {
              content: none;
            }
          }
        }

        .el-radio-group {
          .el-radio {
            height: auto;
            padding: 10px 35px;
            border-radius: 0;
            margin-right: 25px;
            margin-left: 0;

            .el-radio__input {
              display: none;
            }

            .el-radio__label {
              padding-left: 0;
            }
          }
        }
      }

      .content {
        .checkbox-ul {
          // width: 480px;
          white-space: pre-wrap;

          .el-radio-group {
            .el-radio {
              padding: 9px 25px;
              border: 1px solid #E5EAF0;
              border-radius: 4px;

              &.is-checked {
                border-color: #0C7FF2;
              }

              .el-radio__input {
                display: none;
              }

              .el-radio__label {
                padding-left: 0;
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding: 0;
      text-align: center;

      .dialog-footer {
        position: relative;
        display: flex;
    justify-content: center;
        &.kf {
          height: 118px;
          @include flex(row, center, flex-start);
          padding: 20px 38px 15px;
          border-top: 1px solid #FF6332;
          background: linear-gradient(180deg, #FFF1ED 0%, rgba(255, 255, 255, 0) 100%);
        }

        &.upload {
          width: 100%;
          height: 100%;
          // border-top: 1px solid #E5EAF0;
          padding: 25px;
          display: block;
          @include flex(row, center, center);
        }

        .footer-logo {
          width: 76px;
          height: 76px;
          position: absolute;
          right: 0;
          bottom: 0;
        }

        .footer-avatar {
          width: 47px;
          height: 47px;
          border-radius: 50%;
          margin-right: 20px;
        }

        .f-info {
          margin-right: 100px;

          .info-p {
            font-size: 10px;
            color: #4F5862;
            text-align: left;
            line-height: 1.8;

            &.name {
              font-size: 13px;
              font-weight: 500;
              color: #202933;
              margin-bottom: 15px;
              line-height: 1;

              span {
                margin-left: 6px;
                font-size: 10px;
                color: #7E8790;
              }
            }

            i {
              font-size: 10px;
              color: #4F5862;
              margin-right: 7px;
            }
          }
        }

        .f-qrcode {
          img {
            width: 70px;
            height: 70px;
            margin-bottom: 5px;
          }

          p {
            font-size: 10px;
            color: #7E8790;
            line-height: 1.5;
          }
        }
      }
    }
  }
  .kf_body{
    @include flex(row, flex-start, space-between);
    padding: 34px 48px 24px;
    background: linear-gradient(180deg, #EDF4FF 0%, rgba(255,255,255,0) 100%);
border-top: 1px solid #CEE5FC;
.kf_logo{
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 50%;
  margin-right: 24px;
}
.kf_name{
font-size: 16px;
font-weight: 600;
color: #202933;
line-height: 19px;
margin-bottom: 20px;
span{
  display: inline-block;
  padding-left: 8px;
font-size: 12px;
color: #7E8790;
line-height: 14px;
}
}
.kf_news{
font-size: 14px;
color: #4F5862;
line-height: 16px;
margin-bottom: 10px;
.pr8{
  padding-right: 8px;
}
}
.kf_ewm{
width: 89px;
height: 89px;
}
.kf_text{
  margin-top: 5px;
  text-align: center;
font-size: 12px;
color: #7E8790;
line-height: 14px;

}
.kf_img{
  width: 124px;

}
  }
}
</style>
